// 网站内容区功能
function initWebsites() {
    console.log('初始化网站内容功能...');
    
    // 加载网站数据
    loadWebsitesData();
}

// 加载网站数据
function loadWebsitesData() {
    console.log('尝试加载网站数据...');
    
    fetch('./data/websites.json')
        .then(response => {
            console.log('网站数据响应状态:', response.status);
            if (!response.ok) {
                throw new Error(`HTTP错误 ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('网站数据加载成功:', data);
            renderWebsites(data);
        })
        .catch(error => {
            console.error('加载网站数据失败:', error);
            const container = document.getElementById('websites-container');
            container.innerHTML = `<p class="error-message">错误: ${error.message}</p>`;
        });
}

// 渲染网站数据
function renderWebsites(data) {
    const container = document.getElementById('websites-container');
    let html = '';

    if (!data || !data.categories || data.categories.length === 0) {
        html = '<p class="empty-message">暂无网站数据</p>';
    } else {
        data.categories.forEach(category => {
            html += `
                <h3 class="category-title">${category.title}</h3>
                <div class="websites-container">
            `;

            if (!category.items || category.items.length === 0) {
                html += '<p class="empty-message">暂无此类网站</p>';
            } else {
                category.items.forEach(item => {
                    html += `
                        <a href="${item.url}" target="_blank" class="website-card">
                            <img src="${item.favicon}" alt="${item.name}" class="website-favicon">
                            <div class="website-info">
                                <h3>${item.name}</h3>
                                <p>${item.description}</p>
                            </div>
                        </a>
                    `;
                });
            }

            html += `</div>`;
        });
    }

    container.innerHTML = html;
    console.log('网站数据渲染完成');
    
    // 为网站卡片添加事件监听
    addWebsiteCardListeners();
}

// 为网站卡片添加事件监听
function addWebsiteCardListeners() {
    const websiteCards = document.querySelectorAll('.website-card');
    websiteCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            // 这里可以添加卡片悬停效果的额外逻辑
        });
        
        card.addEventListener('click', function(e) {
            const websiteName = this.querySelector('.website-info h3').textContent;
            console.log('访问网站：', websiteName);
        });
    });
}